<template>
  <div class="CardList">
    <div
      v-for="(row, ind) in list"
      :key="ind"
      class="cards"
      :style="{ gap: gap + 'px' }"
    >
      <CardDetail
        v-for="(item, index) in row"
        :key="index"
        :index="index"
        :hoverHeight="(2 - ind / 3) * 50"
        :cardHeight="100 * (ind / 3 + 1)"
        :gap="30"
      >
        <div class="card">商品{{ item }}</div>
        <template slot="hover-content">
          <div class="list" :style="`height: ${(2 - ind / 3) * 50}px`">
            <div class="list-item">手机{{ item }}</div>
            <div class="list-item">电脑{{ item }}</div>
            <div class="list-item">衣服{{ item }}</div>
            <div class="list-item">裤子{{ item }}</div>
            <div class="list-item">鞋子{{ item }}</div>
          </div>
        </template>
      </CardDetail>
    </div>
  </div>
</template>

<script>
export default {
  name: "CardList",
  props: {
    list: {
      type: Array,
      default: () => [
        [1, 2, 3, 4],
        [5, 6, 7],
        // [8,9,10,11,12],
      ],
    },
    gap: {
      type: Number,
      default: 30,
    },
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.CardList ::v-deep {
  border: 2px red solid;
  .cards {
    margin-bottom: 30px;
    display: flex;
    flex-flow: row nowrap;
    box-sizing: border-box;
    .card {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .list {
      height: 100%;
      display: flex;
      flex-flow: column wrap;
      gap: 10px;
      padding: 10px;
    }
  }
}
</style>
